<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表</title>
<style type="text/css">
	#tab_one td{
		border:1px solid green;	
		margin:4px;
		padding:3px;
	}
	
	#tab_one tr{
		border:1px solid black;	
	}
	
	table#tab_one{
		border-collapse:collapse;
		border-spacing: 20px 15px;
	}
	
	table#tab_two{
		#border-collapse: collapse;
		border:3px inset black;	
	}
	
	#tab_two td{
		border-style: inset;
		border-width: 2px;
		border-color: black;
	}
	#tab_two th{
		border:2px inset black;	
	}
	
	#tab_two td,#tab_two th{
		width: 8em;	
	}
	
		#tab_two .td_center{
		text-align: center;	
		width: 10px;
	}
</style>
</head>
<body>
	<table id='tab_one' style="border:3px solid blue;">
		<caption>Main table for BBS</caption>
		<thead>
			<tr>
				<td colspan='4'>This is the head of the table</td>			
			</tr>		
		</thead>	
		<tfoot>
			<tr>
				<td colspan="4">This is the foot of the table</td>			
			</tr>		
		</tfoot>
		<tbody  style="border:1px solid green;">
			<tr>
				<td>cell 01</td>
				<td>cell 02</td>
				<td>cell 03</td>
				<td>cell 04</td>
			</tr>
			<tr>
				<td>cell 11</td>
				<td>cell 12</td>
				<td>cell 13</td>
				<td>cell 14</td>			
			</tr>
		</tbody>
		<tbody>
			<tr>
				<td>cell a1</td>
				<td>cell a2</td>
				<td>cell a3</td>
			</tr>
			<tr>
				<td>cell b1</td>
				<td>cell b2</td>
				<td>cell b3</td>
			</tr>
		</tbody>
	</table>
	
	<div style="margin-top:20px">
		<table id="tab_two">
				<caption>Classic Movie Day</caption>
				<tr>
					<th class="td_center"></th>
					<th>5 pm</th>
					<th>7 pm</th>
					<th>9 pm</th>
					<th>11 pm</th>
				</tr>
				<tr>
					<th class="td_center">Screen one</th>
					<td>Star Wars</td>
					<td>Empire Strikes Back</td>
					<td>Return of the Jedi</td>
					<td>The Exorcist</td>
				</tr>
				<tr>
					<th class="td_center">Screen two</th>
					<td colspan="2">Dances with Wolves</td>
					<td colspan="2">Gone With the Wind</td>
				</tr>
				<tr>
					<th class="td_center">Screen three</th>
					<td colspan="2">2001 A Space odyssey</td>
					<td>The Conversation</td>
					<td>5 Easy Pieces</td>
				</tr>
			</table>
		</div>
</body>
</html>